<template>
  <div class="box">
    <div class="img" :style="`background-image: url('${user.face}')`" />
    <div class="uname">{{ user.uname }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { d_user } from "../interfaces";
@Component
export default class HelloWorld extends Vue {
  @Prop() private user!: d_user;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.box {
  display: flex;
  flex-direction: row;
  padding: 0.2em;
  margin: 0.2em;
  background-color: #e0fff2;
  border-radius: 10px;
  height: fit-content;
  font-size: 0.75em;
  & > .img {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-size: cover;
    background-position: 50% 50%;
  }
  & > .uname {
    height: 1em;
    line-height: 1em;
  }
}
</style>
